<template>
  <div class="top-comment">
    <commit-input>
      <span
        slot="commentCount"
        style="margin-left: 10px; color: #666; font-size: 12px"
        >共{{ topList.commentCount }}条评论</span
      >
      <el-input
        show-word-limit
        maxlength="140"
        type="textarea"
        :rows="3"
        placeholder="评论"
        v-model="commitInput"
        :disabled="disabled"
        @focus="inputFocus"
        slot="input"
      >
      </el-input>
      <li
        v-for="(emoji, index) in emojis"
        :key="index"
        @click="emojiClick(index)"
        slot="emojis"
      >
        {{ emoji }}
      </li>
      <el-button type="primary" size="mini" @click="comment()" slot="click"
        >评论</el-button
      >
    </commit-input>
  </div>
</template>

<script>
import { comment } from '@/api/api.js'
import commitInput from '../../../components/common/commitInput.vue'
export default {
  props: {
    topList: {
      type: Object,
      default() {
        return {}
      }
    },
    getAllComment: {
      type: Function
    }
  },
  data() {
    return {
      commitInput: '',
      disabled: false,
      emojis: [
        '😀',
        '😄',
        '😅',
        '🤣',
        '😂',
        '😉',
        '😊',
        '😍',
        '😘',
        '😜',
        '😝',
        '😏',
        '😒',
        '🙄',
        '😔',
        '😴',
        '😷',
        '😎',
        '😮',
        '😰',
        '😭',
        '😱',
        '😩',
        '😡',
        '💀',
        '👽',
        '🤓',
        '😺',
        '😹',
        '😻',
        '🤚',
        '💩',
        '👍',
        '👎',
        '👏',
        '🙏',
        '💪'
      ]
    }
  },

  components: { commitInput },
  methods: {
    // input焦点
    inputFocus() {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        this.disabled = true
      }
    },
    // 点击表情
    emojiClick(index) {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        this.$message.warning('请先登录')
        this.$store.commit('editIsShow')
        return (this.disabled = true)
      }
      let a = this.commitInput.split('')
      a.push(this.emojis[index])
      let b = a.join('')
      this.commitInput = b
    },
    // 评论
    async comment() {
      if (
        !window.sessionStorage.getItem('token') &&
        !window.sessionStorage.getItem('cookie')
      ) {
        return this.$message.warning('请先登录')
      }

      const res = await comment(1, 2, this.topList.id, this.commitInput)
      if (res.code !== 200) {
        return this.$message.error(`${res.msg}`)
      }
      this.$message.success(`评论成功`)
      this.commitInput = ''
      this.getAllComment()
    }
  },
  computed: {
    token() {
      const token =
        window.sessionStorage.getItem('token') ||
        window.sessionStorage.getItem('cookie')
      if (!token) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top-comment {
  padding: 0 40px;
}
li:hover {
  cursor: pointer;
}
</style>
